<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=VEmZSyzHWyLAiIY5uuoFBZ4p8M7MrXhT"></script>

    <style type="text/css">
        html{height:100%}
        #d1{height:500px ;width:500px;margin:0 auto;}
        #map1{height:100%}
    </style>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
    <div class="headerpage"></div>
    <script>
        $(function () {
            $(".headerpage").load("./header.html");
        });
    </script>
<div id="d1" class="lyear-layout-web">

    <div id="map1" >
    </div>


<div class="login-left">
    <form action="" id="f1">
        <div class="form-group has-feedback feedback-left">
            <label  for="mapdata" >地址</label>
            <input type="text" id="mapdata" name ="position" class="form-control">
        </div>

        <div class="form-group has-feedback feedback-left">
            <label  for="date" >时间</label>
            <input type="text" id="date" name ="time" class="form-control">
        </div>

        <div class="form-group has-feedback feedback-left">
            <input type="button" id="bt1"  class="btn-default btn" value="增 加" >

        </div>


    </form>

</div>
</div>
    </div>
</div>

</body>


<script>
    //添加鼠标监听事件，获取地图信息
    var map = new BMap.Map("map1");
    // 创建地图实例  （中心点）
    var point = new BMap.Point(102.719698,25.022717);
    // 创建点坐标
    map.centerAndZoom(point,12);
    //创建地理编码实例
    var geoc = new BMap.Geocoder();
    //添加监听
    map.addEventListener("click", function(e){
//获取鼠标监听位置
        var pt = e.point;
// 开启鼠标滚轮
        map.enableScrollWheelZoom(true);
//获取点的信息
        geoc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            console.log(pt);
            var adress=addComp.province  + addComp.city  + addComp.district  + addComp.street + addComp.streetNumber
            $("#mapdata").val(adress);
//顺便获取时间
            $("#date").val(new Date().toLocaleString( ));
            console.log(adress);
        });
    });



    // list 序列化后就像一个 set，  后面创建json对象 list.push 进去


    let list;
    $("#bt1").on("click",function(){
        list=$("#f1").serializeArray();
        console.log(list);


        list.push({name:"username",value:$.cookie("username")});
        list.push({name:"headimg",value:$.cookie("headimg")});
        list.push({name:"userid",value:$.cookie("userid")});


        $.ajax({

            url: "./addCoding",
            data: list,
            type: "POST",
            dataType: "json",
            success: function(result) {

                // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
                // $("#data3").html('<tr><td>IE下tbody的innerHTML是只读的</td></tr>');
                alert("成功:"+result);
                window.location.href="./showAll.html"
            },
            error:function (result) {
                console.log("失败"+"");
                console.log(result)


            }
        });
        return false;

    })



</script>
</html>